<template>
  <section>
    <!-- 输入框 -->
    <el-form class="inputBoxGroup">
      <el-form-item label="学生姓名:" class="inputBox">
        <el-input v-model="inputName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话号码:" class="inputBox">
        <el-input v-model="inputNo" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="班级:" class="inputBox">
        <el-input v-model="inputClass" placeholder="请输入班级"></el-input>
      </el-form-item>
      <el-form-item label="入学方式:" class="inputBox">
        <el-input v-model="inputWay" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="入学年份:" class="inputBox">
        <el-input v-model="inputDate" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <el-row class="butGroup">
      <div class="addNew">
        <el-button type="primary">新建</el-button>
      </div>
      <div class="findReset">
        <el-button type="primary">查询</el-button>
        <el-button type="info">重置</el-button>
      </div>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" class="table" border style="width: 85%">
      <el-table-column fixed prop="id" label="学号" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column prop="class" label="班级" width="120"></el-table-column>
      <el-table-column prop="number" label="电话号码" width="120"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="add" label="家庭地址" width="180"></el-table-column>
      <el-table-column prop="date" label="入学时间" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
  data() {
    return {
      inputName: "",
      inputNo: "",
      inputClass: "",
      inputWay: "",
      inputDate: "",

      //表格数据
      tableData: [
        {
          id: 10000,
          name: "杨杨杨",
          sex: "男",
          class: 224,
          number: 15884319198,
          idCard: "513821199608094893",
          add: "四川省眉山市",
          date: "2018-09-01",
        },
        {
          id: 10001,
          name: "兰兰兰",
          sex: "男",
          class: 224,
          number: 15884311111,
          idCard: "513821199608094894",
          add: "四川省达州市",
          date: "2018-09-01",
        },
        {
          id: 10002,
          name: "杨杨杨",
          sex: "男",
          class: 224,
          number: 15884322222,
          idCard: "513821199608094895",
          add: "四川省资阳市",
          date: "2018-09-01",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.addNew {
  float: left;
  margin-left: 3%;
}
.findReset {
  float: right;
  margin-right: 5%;
}
.butGroup {
  width: 90%;
  margin: 1% auto;
}
.table {
  margin: 0 auto;
}
.inputBoxGroup {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  flex-wrap: wrap !important;
  width: 90%;
  margin: 1% auto;
}
.inputBox {
  display: flex !important;
  // margin-right: 6.8%;
  flex-direction: row !important;
}
</style>